<script setup lang="ts">
import {ref} from "vue";
import H1 from "../H1.vue";

const value = ref('');
const value1 = ref('')
</script>

<template>
  <div id="BasicSetup">
    <H1>
      <template v-slot:title>基础设置</template>
    </H1>
    <!--    个人信息-->
    <div class="PersonnelInformation">
      <div class="personnel">
        <div class="left">
          <img src="/img/UserPic.png" alt="加载错误！">
        </div>
        <div class="right">
          <p style="color: black;font-weight: bold">虞书西 <span class="administrator">管理员</span></p>
          <p style="color: #a6a6a6">首席运营 在 唯美家</p>
          <div class="contact">
            <p>
              <el-icon><DocumentAdd /></el-icon>
              <span>29598593440@qq.com</span>
            </p>
            <p>
              <el-icon><DocumentAdd /></el-icon>
              <span>18973711703</span>
            </p>
          </div>
        </div>
      </div>
      <p style="padding: 0 0 20px 35px;font-weight: bold">显示详细信息
        <el-icon><DocumentAdd /></el-icon>
      </p>
    </div>
    <!--    环境设置-->
    <div class="environment">
      <el-descriptions style="margin: 0 2%;padding: 2% 0" :column="2" direction="vertical" title="环境设置信息">
        <el-descriptions-item label="语言:">
          中文
        </el-descriptions-item>
        <el-descriptions-item label="国家或区域设置:">
          中国
        </el-descriptions-item>
        <el-descriptions-item label="日期格式:">
          YYYY-MM-DD
        </el-descriptions-item>
        <el-descriptions-item label="时间格式:">
          12小时
        </el-descriptions-item>
        <el-descriptions-item label="时区:">
          中国标准时间
        </el-descriptions-item>
        <el-descriptions-item label="数字格式:">
          123,456,789
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--    首选项-->
    <div class="preference">
      <h4>显示名称格式和首选项</h4>
      <p>它适用于列表范围，查找字段和用户名列中的全名</p>
      <div class="select">
        <span style="color: #bdbdbd">姓名格式</span>
        <el-select default-value="lucy" style="width: 25%"  v-model="value">
          <el-option value="jack">
            Jack
          </el-option>
          <el-option value="lucy">
            Lucy
          </el-option>
          <el-option value="disabled">
            Disabled
          </el-option>
          <el-option value="Yiminghe">
            yiminghe
          </el-option>
        </el-select>
      </div>
      <div class="select">
        <span style="color: #bdbdbd">排序顺序首选项</span>
        <el-select default-value="lucy" style="width: 25%" v-model="value1">
          <el-option value="jack">
            Jack
          </el-option>
          <el-option value="lucy">
            Lucy
          </el-option>
          <el-option value="disabled">
            Disabled
          </el-option>
          <el-option value="Yiminghe">
            yiminghe
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#BasicSetup {
  h3 {
    padding-left: 10px;
    margin-left: 20px;
    border-left: 4px solid #d83030;
    font-weight: bold;
  }

  .PersonnelInformation {
    width: 100%;
    margin: 2% 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 16px 0px rgba(132, 132, 152, 0.34);
    border-radius: 10px;

    .personnel {
      display: flex;
      padding: 20px 0 20px 40px;

      .right {
        margin-left: 30px;

        .administrator {
          border: 1px solid #ed9a41;
          color: #ed9a41;
          background-color: #fff4e9;
          border-radius: 5px;
          padding: 2px 5px;
          margin-left: 10px;
          font-size: 12px;
        }

        .contact {
          display: flex;

          p {
            margin-right: 10px;
            color: black;
            font-weight: bold;

            .anticon {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  .environment {
    width: 100%;
    margin: 2% 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 16px 0px rgba(132, 132, 152, 0.34);
    border-radius: 10px;

    ::v-deep .ant-descriptions-view {
      margin-left: 80px;

      tr {
        display: flex;
        flex-direction: column;

        span {
          &:nth-of-type(1) {
            width: 120px;
            text-align: right;
          }

          &:nth-of-type(2) {
            width: 200px;
            text-align: left;
            margin-left: 30px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .preference {
    width: 100%;
    margin: 2% 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 16px 0px rgba(132, 132, 152, 0.34);
    border-radius: 10px;

    h4 {
      font-weight: bold;
      padding: 20px 0 0 30px;
    }

    p {
      margin-left: 30px;
      color: #b3b3b3;
    }

    .select {
      padding: 20px 0 20px 100px;

      span {
        display: inline-block;
        width: 120px;
        text-align: right;
        margin-right: 20px;
      }
    }
  }
}
::v-deep .el-descriptions__label.el-descriptions__cell:not(.is-bordered-label).is-vertical-label{
  //font-size: 20px;
  font-weight: 600;
}
</style>
